<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap.min.css" />
	</head>
	<body>
		
		<button type="button" class="btn btn-primary">Primary</button>
		<button type="button" class="btn btn-secondary">Secondary</button>
		<button type="button" class="btn btn-success">Success</button>
		<button type="button" class="btn btn-danger">Danger</button>
		<button type="button" class="btn btn-warning">Warning</button>
		<button type="button" class="btn btn-info">Info</button>
		<button type="button" class="btn btn-light">Light</button>
		<button type="button" class="btn btn-dark">Dark</button>
		<button type="button" class="btn btn-link">Link</button>
		
		<br />
		<br />
		<br />
		
		<!-- Button trigger modal -->
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
		  Launch demo modal
		</button>
		
		<!-- Modal -->
		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		        ...
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary">Save changes</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<br />
		<br />
		<br />
		
		<p>
		  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
		    Link with href
		  </a>
		  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
		    Button with data-target
		  </button>
		</p>
		<div class="collapse" id="collapseExample">
		  <div class="card card-body">
		    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
		  </div>
		</div>
		
		<br />
		<br />
		<br />
		
		<div class="dropdown">
		  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
		    Dropdown button
		  </button>
		  <div class="dropdown-menu">
		    <a class="dropdown-item" href="#">Action</a>
		    <a class="dropdown-item" href="#">Another action</a>
		    <a class="dropdown-item" href="#">Something else here</a>
		  </div>
		</div>
		
		<br />
		<br />
		<br />
		<h1>Example heading <span class="badge badge-secondary">New</span></h1>
		<h2>Example heading <span class="badge badge-secondary">New</span></h2>
		<h3>Example heading <span class="badge badge-secondary">New</span></h3>
		<h4>Example heading <span class="badge badge-secondary">New</span></h4>
		<h5>Example heading <span class="badge badge-secondary">New</span></h5>
		<h6>Example heading <span class="badge badge-secondary">New</span></h6>
		
		<br />
		<br />
		<br />
		
		<div class="card" style="width: 18rem;">
		  <img src="./img/485fdae2b08bea07bfe70b5763d3343.png" class="card-img-top" alt="...">
		  <div class="card-body">
		    <h5 class="card-title">Card title</h5>
		    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		    <a href="#" class="btn btn-primary">Go somewhere</a>
		  </div>
		</div>
		
		<br />
		<br />
		<br />
		
		<form>
		  <div class="form-group">
		    <label for="exampleInputEmail1">Email address</label>
		    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
		    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1">Password</label>
		    <input type="password" class="form-control" id="exampleInputPassword1">
		  </div>
		  <div class="form-group form-check">
		    <input type="checkbox" class="form-check-input" id="exampleCheck1">
		    <label class="form-check-label" for="exampleCheck1">Check me out</label>
		  </div>
		  <button type="submit" class="btn btn-primary">Submit</button>
		</form>
		
		<br />
		<br />
		<br />
		
		<div class="spinner-border text-primary" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-secondary" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-success" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-danger" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-warning" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-info" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-light" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		<div class="spinner-border text-dark" role="status">
		  <span class="sr-only">Loading...</span>
		</div>
		
		<br />
		<br />
		<br />
				<nav aria-label="Page navigation example">
				  <ul class="pagination">
				    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
				    <li class="page-item"><a class="page-link" href="#">1</a></li>
				    <li class="page-item"><a class="page-link" href="#">2</a></li>
				    <li class="page-item"><a class="page-link" href="#">3</a></li>
				    <li class="page-item"><a class="page-link" href="#">Next</a></li>
				  </ul>
				</nav>
		<br />
		<br />
		<br />
		
		<script src="./js/jquery-3.7.1.min.js"></script>
		<!-- 核心文件 -->
		<script src="./js/bootstrap.bundle.min.js"></script>
	</body>
</html>
